import React, { Component } from 'react'

import './css/index.css'

import Film from './Film'
import Cinema from './Cinema'
import Center from './Center'
import Navbar from './Navbar'
import Tabbar from './Tabbar'

export default class App extends Component {
  state = {
    buttons: [
      {
        id: 1,
        name: '电影',
      },
      {
        id: 2,
        name: '影院',
      },
      {
        id: 3,
        name: '我的',
      },
    ],
    currentIndex: 0,
  }
  render() {
    return (
      <>
        <Navbar
          title={this.state.buttons[this.state.currentIndex].name}
          rightClick={() => this.setState({ currentIndex: 2 })}
          rightTitle={this.state.buttons[2].name}
        ></Navbar>

        {/* 支持函数表达式 */}
        {this.whichComponent()}
        <Tabbar
          buttons={this.state.buttons}
          currentIndex={this.state.currentIndex}
          event={(index) => this.setState({ currentIndex: index })}
        ></Tabbar>
      </>
    )
  }

  whichComponent = () => {
    switch (this.state.currentIndex) {
      case 0:
        return <Film></Film>
      case 1:
        return <Cinema></Cinema>
      case 2:
        return <Center></Center>
      default:
        return null
    }
  }
}
